<!--
 * @Author: Sam
 * @Date: 2020-10-22 11:51:30
 * @LastEditTime: 2021-06-24 19:25:24
 * @LastEditors: Sam
 * @Description:
 * @FilePath: \resourcesf:\thework\ygboost-eui\src\components\app\edit\setting\channel\channelPriceList.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="padding-lr">
    <el-tabs v-model="activeName" @tab-click="shippingWayClick">
      <el-tab-pane
        v-for="(item, val) in tabsList.shippingWayList"
        :key="val"
        :label="item"
        :name="item"
      >
        <keep-alive>
          <!-- <tab-pane v-if="activeName == item.shippingWay" :type="item.key" @create="showCreatedTimes" /> -->
          <el-card v-if="activeName == item">
            <div slot="header" class="clearfix text-left">
              <span class="title-icon">最新价格表</span>
            </div>

            <div class="flex">
              <div style="width:15%;border-right:1px solid #ccc">
                <el-tree
                  :data="tabsList.data"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                  :load="loadNode"
                  lazy
                ></el-tree>
              </div>
              <div style="width:85%;" class="padding-left" v-if="tableInfo">
                <div class="text-left" v-if="tableInfo.theEcho">
                  <el-row type="flex" class="margin-bottom">
                    <el-col>
                      <span>渠道类型：</span>
                      <span>{{ tableInfo.theEcho.channelType }}</span>
                    </el-col>
                    <el-col>
                      <span>体积重规则：</span>
                      <span>{{ tableInfo.theEcho.bulkfactorRule }}</span>
                    </el-col>
                    <el-col>
                      <span>最小单箱计费重：</span>
                      <span>{{ tableInfo.theEcho.minChargeWeight }}</span>
                    </el-col>
                    <el-col>
                      <span>最小运单计费量：</span>
                      <span>{{ tableInfo.theEcho.minChargeCount }}</span>
                    </el-col>
                    <el-col>
                      <span>平均到货时间：</span>
                      <span>{{ tableInfo.theEcho.arriveTime }}</span>
                    </el-col>
                  </el-row>
                  <div class="margin-bottom">
                    <span>渠道能力：</span>
                    <span>{{
                      tableInfo.theEcho.channelAbility.toString()
                    }}</span>
                  </div>
                  <div class="margin-bottom">
                    <span>特殊产品：</span>
                    <span>{{
                      tableInfo.theEcho.specialProduct.toString()
                    }}</span>
                  </div>
                  <div class="margin-bottom">
                    <span>其他：</span>
                    <span>{{ tableInfo.theEcho.other.toString() }}</span>
                  </div>
                </div>

                <!-- 表格 -->
                <div>
                  <el-tabs v-model="tabActiveName" @tab-click="handleClick">
                    <el-tab-pane
                      v-for="item in tableInfo.channelLoadingPorts"
                      :key="item.id"
                      :label="
                        `${ChannelData.loadPortAddress[
                          item.consignmentPlaceId
                        ] || ''} +${item.price}`
                      "
                      :name="`${item.consignmentPlaceId}`"
                    >
                      <TableComponent
                        v-if="tabActiveName == item.consignmentPlaceId"
                        :status="`t${item.id}`"
                        :tableColumns="tableInfo.channelChargingSections"
                        :tableData="tableInfo.channelSubareas"
                        :channelFormulaMap="tableInfo.channelFormulaMap"
                        :countrys="ChannelData.countrys"
                        :countryStates="ChannelData.countryStates"
                      />
                      <div class="padding text-left">
                        <div>渠道说明:</div>
                        <div
                          v-html="tableInfo.customerChannel.channelExplain"
                        ></div>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </div>
          </el-card>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
    <!-- <el-tree
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree> -->
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import TableComponent from "./TableComponent";

export default {
  components: {
    TableComponent
  },
  data() {
    return {
      tabsList: [],
      activeName: null,
      tabActiveName: "11",
      tableInfo: null,
      attrs: {
        class: "com.tofba.app.client.seaair.CustomerChannelClient",
        uri: "/open/message",
        type: "blank"
      },
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: "leaf"
      },
      ChannelId: "",
      ChannelData: []
    };
  },
  mounted() {
    this.init();
    this.activeName = null;
  },
  methods: {
    async init() {
      const tabsList = await ajax(
        "queryChannelByShippingWay",
        {
          type: "ZX",
          shippingWay: this.activeName
        },
        this.attrs
      );

      if (tabsList.shippingWayList) {
        this.tabsList = tabsList;
        if (!this.activeName) {
          this.activeName = tabsList.shippingWayList[0];
        }
      } else {
        this.$message.error("数据加载失败");
      }

      // 判断缓存
      if (sessionStorage.getItem("initCustomerChannelData")) {
        this.ChannelData = JSON.parse(
          sessionStorage.getItem("initCustomerChannelData")
        );
      } else {
        const ChannelData = await ajax("initCustomerChannelData", {});
        sessionStorage.setItem(
          "initCustomerChannelData",
          JSON.stringify(ChannelData)
        );
        this.ChannelData = ChannelData;
      }
    },
    async handleNodeClick(data) {
      this.ChannelId = data.id;
      this.getTable();
    },
    async getChildren(node, resolve) {
      const otherList = await ajax("queryChannelByShippingWay", {
        type: "1",
        shippingWay: this.activeName
      });
      resolve(otherList.data);
    },
    // 懒加载
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve(this.tabsList.data);
      }
      if (node.level > 1) return resolve([]);
      if (node.level === 1) {
        if ((node.data.id === 10000) & !node.data.children) {
          // 其他 需要加载数据
          this.getChildren(node, resolve);
        } else if (node.data.children) {
          return resolve(node.data.children);
        } else {
          return resolve([]);
        }
      }
    },
    shippingWayClick(tab) {
      this.init();
    },
    handleClick(tab) {
      this.getTable(parseInt(tab.name), tab.index);
    },
    async getTable(PlaceId, index = 0) {
      let params = {
        customerChannelId: this.ChannelId
      };
      if (PlaceId) {
        params.consignmentPlaceId = PlaceId;
      }

      const tableInfo = await ajax("queryChannelById", params);
      this.tableInfo = tableInfo;
      console.log("tableInfo :>> ", tableInfo);
      if (!tableInfo) return;
      const theEcho = {
        channelType: "",
        bulkfactorRule: `除以${tableInfo.customerChannel.bulkfactorRule}`,
        minChargeWeight: tableInfo.customerChannel.minChargeWeight,
        minChargeCount: tableInfo.customerChannel.minChargeCount,
        arriveTime: tableInfo.customerChannel.arriveTime,
        channelAbility: [],
        specialProduct: [],
        other: []
      };
      for (const i of this.ChannelData.channelTypeList) {
        if (i.id === tableInfo.customerChannel.channelType) {
          theEcho.channelType = i.type;
        }
      }
      for (const i of this.ChannelData.channelAbilitys) {
        const id = `${i.id}`;
        const arr = tableInfo.customerChannel.channelAbility.split(",");
        if (arr.includes(id)) {
          theEcho.channelAbility.push(i.category);
        }
      }

      for (const i of this.ChannelData.specialProducts) {
        const id = `${i.id}`;
        if (tableInfo.customerChannel.specialProduct) {
          const arr = tableInfo.customerChannel.specialProduct.split(",");
          if (arr.includes(id)) {
            theEcho.specialProduct.push(i.category);
          }
        }
      }
      for (const i of this.ChannelData.others) {
        const id = `${i.id}`;
        const arr = tableInfo.customerChannel.other.split(",");
        if (arr.includes(id)) {
          theEcho.other.push(i.category);
        }
      }
      this.tableInfo.theEcho = theEcho;
      console.log(
        "tableInfo.channelLoadingPorts :>> ",
        tableInfo.channelLoadingPorts
      );
      if (tableInfo.channelLoadingPorts.length > 0) {
        this.tabActiveName = tableInfo.channelLoadingPorts[
          index
        ].consignmentPlaceId.toString();
      }
      //
    }
  }
};
</script>

<style></style>
